<template>
  <div id="reset">
    <van-cell-group >
      <van-field label="当前密码" v-model="forms.oldPwd" type="password" placeholder="请输入当前密码" 
      label-class="left-class"/>
      <van-field label="新密码" v-model="forms.newPwd" type="password" placeholder="新密码（6-12位字母或数字）" label-class="left-class"/>
      <van-field label="确认密码" v-model="forms.confirmPwd" type="password" placeholder="确认密码（6-12位字母或数字）" label-class="left-class"/>
    </van-cell-group>
    <div class="btn-class">
      <van-button :color="!completed?'#E2E7F1':'#1989fa'" size="large" :disabled="!completed" 
      @click="confirm">确 认</van-button>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        forms: {
          oldPwd: "",
          newPwd: "",
          confirmPwd: "",
        },
        completed: false,//判断是否输入完成

      }
    },
    activated() {
      this.forms = {
        oldPwd: "",
        newPwd: "",
        confirmPwd: "",
      }
      this.completed = false
      this.$bridge.callHandler('navTitle', {title: '密码修改'})
      // this.showInfo()
    },
    watch: {
      'forms':{
        handler(newV, oldV) {
          if(this.forms.oldPwd != '' && this.forms.newPwd != '' && this.forms.confirmPwd != '') {
            this.completed = true
          }else{
            this.completed = false
          }
        },deep:true
      }
    },
    methods: {
      /**
       * 确认按钮
       * @return {[type]} [description]
       */
      confirm() {
        if(this.forms.oldPwd == "") {
          this.$toast("请输入当前密码")
        }else if(!this.$common.normalPassword.test(this.forms.newPwd)) {
          this.$toast("请输入6-12位数字或密码")
        }else if(this.forms.confirmPwd != this.forms.newPwd) {
          this.$toast("两次输入密码不一致")
        }else {
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}user_info/user_info.php`,
            data: {
              do: "update_password",
              user_id: this.$store.state.userId,
              old_password: this.forms.oldPwd,
              new_password: this.forms.confirmPwd
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type: "success",
              message: "修改成功",
              forbidClick: true,
              duration: 1500,
              overlay: true
            })
            setTimeout(_ => {
              this.$bridge.callHandler('backToLogin')
            }, 1500)
          }).catch(err => {
            this.$toast.clear()
            this.$toast(err.msg)
          })
        }
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .btn-class{
    margin-top: 60px;
    margin-left: 15px;
    margin-right: 15px;
  }

</style>
<style type="text/css" lang="less">
  #reset{
    .van-cell {
      line-height: 33px;
    }
    .left-class {
      font-weight: 600;
    }
    .van-button {
      border-radius: 4px;
    }
  }
</style>